import React from 'react';
import {
  Grid,
  Box,
  Typography,
  CircularProgress,
  Alert,
  Skeleton,
} from '@mui/material';
import { ContentListItem } from '../../../types';
import ContentCard from './ContentCard';

interface ContentGridProps {
  contents: ContentListItem[];
  loading?: boolean;
  error?: string | null;
  onLike: (contentId: number) => void;
  onComment: (contentId: number) => void;
  onView: (contentId: number) => void;
  loadingMore?: boolean;
}

const ContentGrid: React.FC<ContentGridProps> = ({
  contents,
  loading = false,
  error = null,
  onLike,
  onComment,
  onView,
  loadingMore = false,
}) => {
  // 加载骨架屏
  const renderSkeletons = () => {
    return Array.from({ length: 8 }).map((_, index) => (
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={`skeleton-${index}`}>
        <Box sx={{ height: '100%' }}>
          <Skeleton
            variant="rectangular"
            height={200}
            sx={{ borderRadius: 1, mb: 1 }}
          />
          <Skeleton variant="text" height={24} sx={{ mb: 0.5 }} />
          <Skeleton variant="text" height={20} width="60%" sx={{ mb: 1 }} />
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Box sx={{ display: 'flex', gap: 1 }}>
              <Skeleton variant="circular" width={24} height={24} />
              <Skeleton variant="text" width={20} height={20} />
              <Skeleton variant="circular" width={24} height={24} />
              <Skeleton variant="text" width={20} height={20} />
            </Box>
            <Skeleton variant="text" width={40} height={20} />
          </Box>
        </Box>
      </Grid>
    ));
  };

  // 错误状态
  if (error && !loading) {
    return (
      <Alert 
        severity="error" 
        sx={{ 
          borderRadius: 2,
          mb: 3,
        }}
      >
        {error}
      </Alert>
    );
  }

  // 初始加载状态
  if (loading && contents.length === 0) {
    return (
      <Grid container spacing={3}>
        {renderSkeletons()}
      </Grid>
    );
  }

  // 空状态
  if (!loading && contents.length === 0) {
    return (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          py: 8,
          textAlign: 'center',
        }}
      >
        <Typography
          variant="h6"
          color="text.secondary"
          gutterBottom
          sx={{ fontWeight: 500 }}
        >
          暂无内容
        </Typography>
        <Typography variant="body2" color="text.secondary">
          还没有找到相关内容，试试调整搜索条件吧
        </Typography>
      </Box>
    );
  }

  return (
    <>
      <Grid container spacing={3}>
        {contents.map((content) => (
          <Grid 
            size={{ xs: 12, sm: 6, md: 4, lg: 3 }} 
            key={content.id}
          >
            <ContentCard
              content={content}
              onLike={onLike}
              onComment={onComment}
              onView={onView}
              loading={loading}
            />
          </Grid>
        ))}
        
        {/* 加载更多时的骨架屏 */}
        {loadingMore && (
          <>
            {Array.from({ length: 4 }).map((_, index) => (
              <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={`loading-more-${index}`}>
                <Box sx={{ height: '100%' }}>
                  <Skeleton
                    variant="rectangular"
                    height={200}
                    sx={{ borderRadius: 1, mb: 1 }}
                  />
                  <Skeleton variant="text" height={24} sx={{ mb: 0.5 }} />
                  <Skeleton variant="text" height={20} width="60%" sx={{ mb: 1 }} />
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Box sx={{ display: 'flex', gap: 1 }}>
                      <Skeleton variant="circular" width={24} height={24} />
                      <Skeleton variant="text" width={20} height={20} />
                      <Skeleton variant="circular" width={24} height={24} />
                      <Skeleton variant="text" width={20} height={20} />
                    </Box>
                    <Skeleton variant="text" width={40} height={20} />
                  </Box>
                </Box>
              </Grid>
            ))}
          </>
        )}
      </Grid>
      
      {/* 加载更多指示器 */}
      {loadingMore && (
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            py: 4,
          }}
        >
          <CircularProgress size={24} sx={{ mr: 2 }} />
          <Typography variant="body2" color="text.secondary">
            加载更多内容中...
          </Typography>
        </Box>
      )}
    </>
  );
};

export default ContentGrid; 